<!-- 网络类型列表显示 -->
<template>
    <div>
        <div class="common-layout">
            <el-container>
                <el-aside width="200px" style="padding-top: 3px;max-height: 100%">
                    <div style="border: 1px solid cadetblue;height: 100%;">
                        <!-- 查询 -->
                        <el-input v-model="filterText" style="width: 100%;padding-bottom: 12px;" placeholder="请输入" />
                        <!-- 树形列表 -->
                        <el-tree ref="treeRef" style="max-width: 600px" class="filter-tree" :data="data"
                            @change="fetchData" default-expand-all node-key="value" highlight-current
                            :filter-node-method="filterNodes" />
                    </div>
                </el-aside>
                <el-container>
                    <el-header>
                        <!-- 查询条件 -->
                        <div style="width: 100%;padding-top: 20px;border: 1px solid cadetblue">
                            <el-form :inline="true" :model="ShowData" class="demo-form-inline"
                                style="text-align: center;">
                                <el-form-item label="网格名称">
                                    <el-input v-model="ShowData.Grid_name" placeholder="请输入网格名称" clearable />
                                </el-form-item>
                                <el-form-item label="所属区域">
                                    <el-select v-model="ShowData.Owning_region" placeholder="请输所属区域"
                                        style="width: 200px;">
                                        <el-option v-for="item in AreaList" :key="item.value" :label="item.text"
                                            :value="item.value" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="fetchData">搜索</el-button>
                                    <el-button type="" @click="chengzho">重置</el-button>
                                    <el-button type="success" @click="exportToExcel">导出Excel</el-button>
                                </el-form-item>
                            </el-form>
                        </div>

                    </el-header>
                    <el-main>
                        <!--列表 -->
                        <el-table :data="tableData" style="width: 100%; border: 1px solid cadetblue"
                            :row-class-name="tableData">
                            <el-table-column type="index" label="序号" width="100px" align="center" />
                            <el-table-column prop="grid_numbering" label="网格编号" />
                            <el-table-column prop="grid_name" label="网络名称" />
                            <el-table-column prop="owning_region" label="所属区域">
                                <template v-slot="scope">
                                    <span v-if="scope.row.owning_region == 1">东风社区</span>
                                    <span v-if="scope.row.owning_region == 2">新民社区</span>
                                    <span v-if="scope.row.owning_region == 3">文化社区</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="subordinate_level" label="所属层级" />
                        </el-table>
                    </el-main>
                </el-container>
            </el-container>

        </div>
        <!-- 分页 -->
        <table style="margin: 5px auto;">
            <tbody>
                <tr>
                    <td>
                        <el-pagination v-model:current-page="page.page" v-model:page-size="page.size"
                            :page-sizes="[15, 20, 25, 30]" background layout="total,slot" :total="page.tatalCount"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                            next-text="下一页">
                            <span>
                                &nbsp;可以显示{{ page.size }}条，一共{{ page.pageCount }}页，当前是第{{ page.page }}页
                            </span>
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="page.page" v-model:page-size="page.size"
                            :page-sizes="[15, 20, 25, 30]" background layout="sizes, slot,prev, pager, next"
                            :total="page.tatalCount" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="page.page" v-model:page-size="page.size"
                            :page-sizes="[15, 20, 25, 30]" background layout="slot,jumper" :total="page.tatalCount"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                            next-text="下一页">
                        </el-pagination>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
//引入axios
import axios from 'axios';
//引入组件
import { ref, reactive, onMounted, watch } from "vue";

import { ElTree } from 'element-plus'

//xlsx
import * as XLSX from 'xlsx';

const treeRef = ref<InstanceType<typeof ElTree>>()
const filterNodes = (value: string, ShuTrrList: Tree) => {
    if (!value) return true
    return ShuTrrList.label.includes(value)
}

///导出Excel
const exportToExcel = () => {
    // 创建一个工作簿
    const workbook = XLSX.utils.book_new();
    //列名
    const dynamicArray = [
        ['序号', '网格编号', '网络名称', '所属区域', '所属层级'],
        ...tableData.value.map((item: any) => {
            //数据
            return [item.id, item.grid_numbering, item.grid_name, item.owning_region, item.subordinate_level];
        }),
    ];
    const worksheet = XLSX.utils.aoa_to_sheet(dynamicArray);
    // 将工作表添加到工作簿
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

    // 生成Excel文件
    XLSX.writeFile(workbook, 'data.xlsx');

};

const filterText = ref('')

watch(filterText, (val) => {
    treeRef.value!.filter(val)
})


const data: Tree[] = [
    {
        label: '呼兰区',
        children: [
            {
                label: '呼兰街道',
                children: [
                    {
                        label: '东风社区',
                    },
                    {
                        label: '文化社区',
                    },
                    {
                        label: '新民社区',
                    },
                ]
            },
            {
                label: '利民街道',

            },
            {
                label: '兰河街道',

            },
        ],
    },
]

interface Tree {
    [key: string]: any
}

//重置按钮
const chengzho = () => {
    ShowData.Grid_name = "";
    ShowData.Owning_region = "";
}

//分页方法
const handleSizeChange = (val: number) => {
    page.size = val;
    fetchData();
}
const handleCurrentChange = (val: number) => {
    page.page = val;
    fetchData();
}


const page = reactive({
    page: 1,
    size: 15,
    tatalCount: 0,
    pageCount: 0,
})

//所属区域
const AreaList = ref<{ value: number; text: string }[]>([]);

const Area = () => {
    axios.get("http://47.95.178.186:8000/GriddingGetRout/api/Cellgrid/AreaType").then(res => {
        AreaList.value = res.data;
    })
}


//条件查询的表单
const ShowData = reactive({
    Grid_name: "",  //查询条件网络类型名称
    Owning_region: "",
});
const tableData = ref([])
//异步显示列表
const fetchData = async () => {
    try {
        const res = await axios.get('http://47.95.178.186:8000/GriddingGetRout/api/Gridding/PageShowGridding', {
            params: {
                PageIndex: page.page,
                PageSize: page.size,
                Grid_name: ShowData.Grid_name,
                Owning_region: ShowData.Owning_region || 0,
            }
        })

        tableData.value = res.data.data
        page.tatalCount = res.data.totalCount
        page.pageCount = res.data.pageCount
    } catch (error) {
        console.error(error)
    }
}
//首次加载显示列表信息
onMounted(() => {
    fetchData();
    Area();
})

</script>

<style scoped>
.container {
    /* 设置div居中对齐 */
    width: 100%;
    display: flex;
    justify-content: center;
}

.table-container {
    /* 设置table居中对齐 */
    display: flex;
    justify-content: center;
}
</style>